<template>
  <div class="CamersCount card-bg">
    <div class="top">
      <div class="left">
        <span class="title">抓拍总量</span>
        <div class="count">{{ num }}</div>
      </div>
      <img src="../../../assets/img/group.png" alt="" />
    </div>
  </div>
</template>
<script>
import { statisticsCapture } from "@/api/panoramicData";
let timer = null;
export default {
  created() {
    this.runStatisticsCapture();
  },
  beforeDestroy() {
    timer && clearInterval(timer);
  },
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    async runStatisticsCapture() {
      const res = await statisticsCapture();
      this.num = res.data.totalCameras;
      timer = setInterval(() => {
        statisticsCapture().then((res) => {
          this.num = res.data.totalCameras;
        });
      }, 60000);
    },
  },
};
</script>
<style lang="scss" scoped>
.CamersCount {
  width: 100%;
  height: 100%;
  padding: 18px;
  box-sizing: border-box;

  .top {
    display: flex;
    height: 100px;
    justify-content: space-between;

    .title {
      color: #a8d6ff;
      font-size: 14px;
    }

    .count {
      color: #21e8e1;
      font-size: 36px;
      line-height: 75px;
    }

    img {
      width: 70px;
      height: 64px;
      padding-top: 18px;
    }
  }
}
</style>
